﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <environment>
        <link href="~/css/framework-font.css" rel="stylesheet" />
        <link href="~/css/framework-ui.css" rel="stylesheet" />
        <script src="~/js/jquery/jquery-2.1.1.min.js"></script>
        <link href="~/css/framework-theme.css" rel="stylesheet" />
        <link href="~/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
        <link href="~/css/framework-theme.css" rel="stylesheet" />
        <script src="~/js/charts/Chart.js"></script>
    </environment>
    <script>
            $(function () {
                GetSalaryChart();
                GetLeaveChart();
            });
            function GetSalaryChart() {
                var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
                var lineChartData = {
                    labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "8月", "10月", "11月", "12月"],
                    datasets: [
                        {
                            label: "My First dataset",
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                        },
                        {
                            label: "My Second dataset",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                        }
                    ]
                }
                var ctx = document.getElementById("salarychart").getContext("2d");
                window.myLine = new Chart(ctx).Line(lineChartData, {
                    responsive: false,
                    bezierCurve: false
                });
            }
            function GetLeaveChart() {
                var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
                var a_value = randomScalingFactor();
                var b_value = randomScalingFactor();
                var c_value = randomScalingFactor();
                var d_value = randomScalingFactor();
                var doughnutData = [
                    {
                        value: a_value,
                        color: "#F7464A",
                        highlight: "#FF5A5E",
                        label: "事假"
                    },
                    {
                        value: b_value,
                        color: "#46BFBD",
                        highlight: "#5AD3D1",
                        label: "病假"
                    },
                    {
                        value: c_value,
                        color: "#FDB45C",
                        highlight: "#FFC870",
                        label: "公休假"
                    },
                    {
                        value: d_value,
                        color: "#949FB1",
                        highlight: "#A8B3C5",
                        label: "调休假"
                    }
                ];
                var ctx = document.getElementById("leavechart").getContext("2d");
                window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: false });
                $("#a_value").html(a_value + "小时");
                $("#b_value").html(b_value + "小时");
                $("#c_value").html(c_value + "小时");
                $("#d_value").html(d_value + "小时");
            }
    </script>
</head>
<body>
    <div id="areascontent">
        <div class="rows" style="margin-bottom: 1%; border: 1px solid #e6e6e6; overflow: hidden; padding-left: 1px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-line-chart fa-lg" style="padding-right: 5px;"></i>关键数据实时指标
                    @*<div style="float: right; position: relative; top: -4px; right: 0px;">
                        <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="330" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                    </div>*@
                </div>
                <div class="panel-body">
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #fc8675;">
                            <h2 class="m-top-none">8</h2>
                            <h5>对私待处理任务</h5>
                            <div class="stat-icon">
                                <i class="fa fa-user fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #6bafbd;">
                            <h2 class="m-top-none">12</h2>
                            <h5>对私待签收任务</h5>
                            <div class="stat-icon">
                                <i class="fa fa-hdd-o fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #f3ce85;">
                            <h2 class="m-top-none">2</h2>
                            <h5>对公待处理任务</h5>
                            <div class="stat-icon">
                                <i class="fa fa-shopping-cart fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #949FB1;">
                            <h2 class="m-top-none">6</h2>
                            <h5>对公待签收任务</h5>
                            <div class="stat-icon">
                                <i class="fa fa-gavel fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #65cea7; margin-right: 0px;">
                            <h2 class="m-top-none">268</h2>
                            <h5>本月交易订单数量</h5>
                            <div class="stat-icon">
                                <i class="fa fa-truck fa-3x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rows" style="margin-bottom: 1%; overflow: hidden;">
            <div style="float: left; width: 69%;">
                <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>考勤统计
                            <div style="float: right">
                                <span style="font-weight: 500;"><i class="fa fa-square" style="color: #dcdcdc; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>迟到</span>
                                <span style="margin-left: 10px; font-weight: 500;"><i class="fa fa-square" style="color: #97bbcd; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>缺卡</span>
                            </div>
                        </div>
                        <div class="panel-body" style="padding-bottom: 0px;">
                            <canvas id="salarychart" style="height: 285px; width: 100%; padding-right: 10px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; width: 30%;">
                <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-pie-chart fa-lg" style="padding-right: 5px;"></i>请假统计</div>
                        <div class="panel-body" style="padding-top: 20px;">
                            <canvas id="leavechart" style="height: 160px; width: 100%;"></canvas>
                            <div style="text-align: center; padding-top: 20px;">
                                <span><i class="fa fa-square" style="color: #F7464A; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>事假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #46BFBD; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>病假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #FDB45C; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>公休假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #949FB1; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>调休假</span>
                            </div>
                            <div style="margin-top: 20px; padding-top: 18px; height: 60px; border-top: 1px solid #e6e6e6;">
                                <div style="width: 25%; text-align: center; float: left;">
                                    <span id="a_value">16.5小时</span>
                                    <p style="color: #a1a1a1">事假</p>
                                </div>
                                <div style="width: 25%; text-align: center; float: left;">
                                    <span id="b_value">7.5小时</span>
                                    <p style="color: #a1a1a1">病假</p>
                                </div>
                                <div style="width: 25%; text-align: center; float: left;">
                                    <span id="c_value">13小时</span>
                                    <p style="color: #a1a1a1">公休假</p>
                                </div>
                                <div style="width: 25%; text-align: center; float: left;">
                                    <span id="d_value">19小时</span>
                                    <p style="color: #a1a1a1">调休假</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rows" style="overflow: hidden;">
            <div style="float: left; width: 34%; margin-right: 1%;">
                <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-thumbs-o-up fa-lg" style="padding-right: 5px;"></i>最新签约</div>
                        <div class="panel-body">
                            <ul id="signInfo">
                             
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: left; width: 34%; margin-right: 1%;">
                <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-rss fa-lg" style="padding-right: 5px;"></i>通知公告</div>
                        <div class="panel-body">
                            <ul id="notice">
                              
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; width: 30%;">
                <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-send fa-lg" style="padding-right: 5px;"></i>企业文化</div>
                        <div class="panel-body">
                            <ul id="culture">
                               
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        #copyrightcontent {
            height: 30px;
            line-height: 29px;
            overflow: hidden;
            position: absolute;
            top: 100%;
            margin-top: -30px;
            width: 100%;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            padding-left: 10px;
            padding-right: 10px;
        }

        .dashboard-stats {
            float: left;
            width: 20%;
        }

        .dashboard-stats-item {
            position: relative;
            overflow: hidden;
            color: #fff;
            cursor: pointer;
            height: 105px;
            margin-right: 25px;
            margin-bottom: 10px;
            padding: 20px 20px;
        }

            .dashboard-stats-item .m-top-none {
                margin-top: 2px;
            }

            .dashboard-stats-item h2 {
                font-size: 35px;
                font-family: inherit;
                line-height: 1.1;
                font-weight: 500;
            }

            .dashboard-stats-item h5 {
                font-size: 14px;
                font-family: inherit;
                margin-top: 3px;
                line-height: 1.1;
            }


            .dashboard-stats-item .stat-icon {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 30px;
                opacity: .3;
            }

        .dashboard-stats i.fa.stats-icon {
            width: 50px;
            padding: 20px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            height: 50px;
            border-radius: 10px;
        }

        .panel-default {
            border: none;
            border-radius: 0px;
            margin-bottom: 0px;
            box-shadow: none;
            -webkit-box-shadow: none;
        }

            .panel-default > .panel-heading {
                color: #777;
                background-color: #fff;
                border-color: #e6e6e6;
                padding: 10px 10px;
            }

            .panel-default > .panel-body {
                padding: 10px;
                padding-bottom: 0px;
            }

                .panel-default > .panel-body ul {
                    overflow: hidden;
                    padding: 0;
                    margin: 0px;
                    margin-top: -5px;
                }

                    .panel-default > .panel-body ul li {
                        line-height: 27px;
                        list-style-type: none;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                        .panel-default > .panel-body ul li .time {
                            color: #a1a1a1;
                            float: right;
                            padding-right: 5px;
                        }
    </style>
</body>
</html>
<script type="text/javascript">

    function openNew(id, title) {
        var url = "/SystemManage/RichText/Preview?keyValue=" + id;

        var dataId = id;

        var dataUrl = url;
        var menuName = title;
        var flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0) {
            return false;
        }
        top.$('.menuTab').each(function () {
            if ($(this).data('id') == dataUrl) {
                if (!$(this).hasClass('active')) {
                    top.$(this).addClass('active').siblings('.menuTab').removeClass('active');
                    top.$.nfinetab.scrollToTab(this);
                    top.$('.mainContent .NFine_iframe').each(function () {
                        if ($(this).data('id') == dataUrl) {
                            $(this).show().siblings('.NFine_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });
        if (flag) {
            var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-remove"></i></a>';
            top.$('.menuTab').removeClass('active');
            var str1 = '<iframe class="NFine_iframe" id="iframe' + dataId + '" name="iframe' + dataId + '"  width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
            top.$('.mainContent').find('iframe.NFine_iframe').hide();
            top.$('.mainContent').append(str1);
            top.$.loading(true);
            top.$('.mainContent iframe:visible').load(function () {
               top.$.loading(false);
            });
            top.$('.menuTabs .page-tabs-content').append(str);
            top.$.nfinetab.scrollToTab($('.menuTab.active'));
        }

    }

    $(function () {
        $.ajax({
            type: 'post',
            url: '/richtext/GetNewsInfoList?type=1',
            dataType:'json'
        }).then(function (res) {
          
            if (res) {
               
                for (var i = 0; i < res.length; i++) {
                    var item = res[i];
                    var html = ` <li><a href="javascript:void(0)"  onClick="openNew('${item.F_Id}','${item.F_Title}')" >${item.F_Title}</a><span class="time">${item.F_CreatorTime}</span></li>`;
                    $('#signInfo').append(html);
                    $('#notice').append(html);
                    $('#culture').append(html);
                }
            }
        });

    });
</script>
